<template>
  <!-- 首页系统更新-推荐应用tab -->
  <div class="arml-tab">
    <!-- 选项卡 -->
    <el-tabs v-model="activeName" class="tabs" @tab-change="setActive">
      <el-tab-pane
        :label="item.name"
        :name="item.name"
        v-for="item in armlTabs"
        :key="item.id"
        :class="{ tabsActive: activeName === item.name }"
      >
        <!-- 列表 -->
        <armlList
          :dataList="dataList"
          :activeName="activeName"
          @edit="edit"
          v-loading="loading"
        ></armlList
      ></el-tab-pane>
    </el-tabs>

    <!-- 查看更多 -->
    <div class="look-more" @click="navigateToMore">
      查看更多<el-icon><ArrowRight /></el-icon>
    </div>
    <!-- 营销图编辑弹窗 -->
    <MarketDialog
      v-model:dialogVisible="dialogVisible"
      :form="form"
      v-if="dialogVisible"
    />
  </div>
</template>

<script lang="tsx" setup>
import { ref, onMounted, reactive, PropType } from 'vue';
import { TabItem } from '@/types/dashboard/index';
import { useRouter } from 'vue-router';
const router = useRouter();
// 接口api
import { getMarketingInfo } from '@/api/serviceCenter';
// 判断是否为对象格式返回[]string
import { convertObjectToArray } from '@/utils';
import dashboard from '@/modules';
const { getApiConfig, TABLECONFIG } = dashboard;
import armlList from '../armlList/index.vue';
// 定义 Props
const props = defineProps({
  armlTabs: {
    type: Array as PropType<TabItem[]>, // 明确 tabs 的类型
    required: true,
  },
});
// 编辑弹窗组件
import MarketDialog from '@/views/serviceCenter/marketingGallery/components/marketDialog.vue';
// 弹窗变量控制显示隐藏
const dialogVisible = ref(false);
// 弹窗表单
const form = reactive({
  // 显示设置默认选中
  show_id: ['2', '3'],
});
const loading = ref(false);
// 列表数据
const dataList = ref([]);
// 定义 activeName 为字符串类型
const activeName = ref<string>('推荐应用');
// 选项卡激活函数，动态请求数据
const setActive = async (tab: string) => {
  activeName.value = tab; // 设置当前选项卡
  dataList.value = [];
  // 根据选项卡获取 API 函数和 URL
  const { apiFunc, url } = getApiConfig('HOME', tab);
  try {
    loading.value = true;
    // 动态调用 API 函数，传入对应的 URL 和配置
    const { data } = await apiFunc(url, TABLECONFIG);
    dataList.value = data.data || [];
    loading.value = false;
  } catch (error) {
    console.error('请求失败:', error);
  }
};
// 营销图库列表弹窗
const edit = async (row: any) => {
  // 每次打开 Dialog 时先重置 form
  dialogVisible.value = true;
  try {
    const { data } = await getMarketingInfo({ id: row.id });

    if (data.mg_id) {
      data.show_id = convertObjectToArray(data.show_id);
    }
    const deafultForm = {
      // 显示设置
      show_id: ['2', '3', '4'],
      // 联系人
      contacts: data.contacts,
      // 联系电话
      phone: data.phone,
      // 联系地址
      address: data.address,
      // 下载地址
      download: '',
      // 二维码链接地址
      qrcode_url: '',
      // 上传二维码地址
      qrcode: '',
      id: '',
      // 左侧背景图
      img_url: row.img_url,
      // 营销id
      mg_id: row.id,
      // 营销图名称
      mg_name: row.name,
      // 是否编辑新增
      isAdd: data ? false : true,
    };
    resetForm(data.mg_id ? data : deafultForm);
  } catch (error) {
    console.log('error:', error);
  }
};
// 定义一个函数用于重置 form 到初始状态
const resetForm = (row: any) => {
  Object.assign(form, row);
};
// 动态跳转函数
const navigateToMore = () => {
  const activeTab = props.armlTabs.find(
    (tab: any) => tab.name === activeName.value
  );
  if (activeTab) {
    router.push(activeTab.path); // 跳转到对应路径
  }
};
// 页面加载时，默认请求第一个选项卡的数据
onMounted(() => {
  setActive('推荐应用'); // 默认激活第一个选项卡
});
</script>

<style lang="scss" scoped src="./index.scss"></style>
